<template>
  <div>
    <el-form label-width="100px" label-position="left">
      <el-form-item label="选择站点">
        <el-select
          size="mini"
          v-model="stationId"
          filterable
          placeholder="请选择"
          @change="handleStationChange"
        >
          <el-option
            v-for="item in allStations"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="选择参数">
        <el-select
          size="mini"
          v-model="pointId"
          filterable
          placeholder="请选择"
          @change="handlePointChange"
        >
          <el-option
            v-for="item in points"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-button
        style="width: 100%"
        type="primary"
        plain
        size="mini"
        @click="saveDataBtn"
        >刷新</el-button
      >
    </el-form>
  </div>
</template>
<script>
import { queryAllDataSet, detailBysetId } from "@/api/bigscreen";
import { comboStation } from '@/api/station'
import { comboPoint, listPointByStationId } from '@/api/point'
import { getDataByPointId } from '@/api/pointData'

export default {
  name: "StationPointComponents",
  model: {
    prop: "formData",
    event: "input"
  },
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      params: {},

      stationId: null, // 站点id
      pointId: null, // 参数点id
      stationName: '',
      pointName: '',
      allStations: [], // 全部站点
      allPoints: [], // 全部参数点
      stationPointLoadedPromise: null,
    };
  },
  computed: {
    points() {
      return this.allPoints.filter(v => v.stationId === this.stationId)
    }
  },
  watch: {
    formData: {
      handler(val) {
        this.stationPointLoadedPromise.then(() => {
          if(this.formData != null) {
            this.stationId = this.formData.stationId
            this.pointId = this.formData.pointId
            this.stationName = this.formData.stationName
            this.pointName = this.formData.pointName
          } else {
            this.stationId = null
            this.pointId = null
            this.stationName = null
            this.pointName = null
          }
        })
      },
      deep: true
    }
  },
  created() {
    this.stationPointLoadedPromise = new Promise((resolve,reject) => {
      // 查询站点，参数点
      Promise.all([this.comboStation(),this.comboPoint()]).then(() => {
        resolve()
      })
    })
  },
  mounted() {},
  methods: {
    handleStationChange() {
      this.stationName = this.allStations.find(v => v.id === this.stationId).name
      // 查询参数点
      let firstPoint = this.points[0]
      this.pointId = firstPoint.id
      this.pointName = firstPoint.name
      // listPointByStationId(this.stationId).then(resp => {
      //   this.allPoints = resp.data
      //   // if(this.allPoints.length > 0) {
      //   //   if(this.pointId == null && this.form.stationId != this.stationId) {
      //   //     // 默认选中第一个
      //   //     this.pointId = this.allPoints[0].id
      //   //     this.pointName = this.allPoints[0].name
      //   //     this.saveDataBtn()
      //   //   }
      //   // }
      // })
    },
    handlePointChange() {
      this.pointName = this.allPoints.find(v => v.id === this.pointId).name
      this.saveDataBtn()
    },
    async saveDataBtn() {
      const params = {
        stationId: this.stationId,
        pointId: this.pointId,
        stationName: this.stationName,
        pointName: this.pointName,
      }
      // 查询实时数据
      getDataByPointId(this.pointId).then(resp => {
        let code = this.allPoints.find(v => v.id === this.pointId).code
        let value = resp.data[code]
      })

      // console.log(params)
      this.$emit("input", params);
      this.$emit("change", params);
    },
    comboStation() {
      return comboStation().then(resp => {
        this.allStations = resp.data
        // if(this.stationId == null && this.allStations.length > 0) { // 默认查询第一个站点
        //   this.stationId = this.allStations[0].id
        //   this.stationName = this.allStations[0].name
        //   this.handleStationChange()
        // } else {
        //   this.handleStationChange()
        // }
        return Promise.resolve()
      })
    },
    comboPoint() {
      return comboPoint().then(resp => {
        this.allPoints = resp.data
        return Promise.resolve()
      })
    },
  }
};
</script>
<style lang="sass" scoped></style>
